<template>
    <div :class="isMobile ? 'rewards-page' : 'rewards-page-pc'">
        <!-- 语言切换按钮 -->
        <div class="language-switcher">
            <div class="language-btn" @click="Store.dispatch('toggleLanguage')" style="cursor: pointer;">
                {{ getCurrentText('中文/English', 'English/中文') }}
            </div>
        </div>
        
        <div class="box">
            <div class="title">{{ getCurrentText('特色奖励', 'Featured Rewards') }}</div>
            <div class="rewards-card">
                <div v-for="(item, index) in featuredCards" :key="index" class="rewards-card-item">
                    <div>
                        <div>
                            <h3>{{ getCurrentText(item.title, item.e_title) }}</h3>
                            <p>{{ getCurrentText(item.description, item.e_description) }}</p>
                            <span class="reward-amount">{{ getCurrentText('奖励', 'Reward') }}: {{ item.reward }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="title">{{ getCurrentText('商店返现', 'Store Cashback') }}</div>
            <div class="rewards-card">
                <div v-for="(item, index) in shopCards" :key="index" class="rewards-card-item">
                    <div>
                        <div>
                            <h3>{{ getCurrentText(item.name, item.e_name) }}</h3>
                            <p>{{ getCurrentText(item.cashback, item.e_cashback) }}</p>
                            <span class="reward-amount">{{ getCurrentText('最高', 'Max') }} {{ getCurrentText(item.maxCashback, item.e_maxCashback) || getCurrentText(item.cashback, item.e_cashback) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex';
const Store = useStore()
const isMobile = ref()
isMobile.value = Store.state.isMobile

// 获取语言状态
const currentLanguage = computed(() => Store.getters.currentLanguage);

// 获取当前语言的文本
const getCurrentText = (chineseText, englishText) => {
  if (!chineseText || !englishText) return chineseText || englishText || "";
  return currentLanguage.value === "zh" ? chineseText : englishText;
};
// 响应式数据
const notificationCount = ref(3)
const userBalance = ref(1250)

// 导航项
const navItems = ref([
    { id: 1, name: '答题', hasDropdown: false },
    { id: 2, name: '游戏', hasDropdown: false },
    { id: 3, name: '购物', hasDropdown: false },
    { id: 4, name: '发现', hasDropdown: false },
    { id: 5, name: '更多', hasDropdown: true }
])

// 特色卡片数据
const featuredCards = ref([
    {
        id: 1,
        title: '熊猫汇款卡',
        e_title: 'Panda Remittance Card',
        description: '熊猫汇款：向世界汇款！',
        e_description: 'Panda Remittance: Send money worldwide!',
        reward: '700',
        icon: 'credit-pay'
    },
    {
        id: 2,
        title: 'Coinbase',
        e_title: 'Coinbase',
        description: '最低 2 元起交易！',
        e_description: 'Trade from as low as $2!',
        reward: '1000',
        icon: 'gold-coin-o'
    }
])

// 商店卡片数据
const shopCards = ref([
    {
        id: 1,
        name: 'Best Buy',
        e_name: 'Best Buy',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        maxCashback: '最高 4% 返现',
        e_maxCashback: 'Up to 4% Cashback',
        earnRate: '4',
        multiplier: '4x',
        icon: 'shop-o'
    },
    {
        id: 2,
        name: 'eBay',
        e_name: 'eBay',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        earnRate: '1',
        icon: 'shopping-cart-o'
    },
    {
        id: 3,
        name: 'Lowe\'s',
        e_name: 'Lowe\'s',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        earnRate: '1',
        icon: 'shop-o'
    },
    {
        id: 4,
        name: 'Sam\'s Club',
        e_name: 'Sam\'s Club',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        maxCashback: '最高 8% 返现',
        e_maxCashback: 'Up to 8% Cashback',
        earnRate: '8',
        multiplier: '8x',
        icon: 'shop-o'
    },
    {
        id: 5,
        name: 'Amazon',
        e_name: 'Amazon',
        cashback: '最高 4% 返现',
        e_cashback: 'Up to 4% Cashback',
        earnRate: '4',
        icon: 'shopping-cart-o'
    },
    {
        id: 6,
        name: 'Walmart',
        e_name: 'Walmart',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        earnRate: '1',
        icon: 'shop-o'
    },
    {
        id: 7,
        name: 'Expedia',
        e_name: 'Expedia',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        maxCashback: '最高 10% 返现',
        e_maxCashback: 'Up to 10% Cashback',
        earnRate: '10',
        multiplier: '10x',
        icon: 'location-o'
    },
    {
        id: 8,
        name: 'The Home Depot',
        e_name: 'The Home Depot',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        maxCashback: '最高 8% 返现',
        e_maxCashback: 'Up to 8% Cashback',
        earnRate: '8',
        multiplier: '8x',
        icon: 'shop-o'
    },
    {
        id: 9,
        name: 'Hotels.com',
        e_name: 'Hotels.com',
        cashback: '3% 返现',
        e_cashback: '3% Cashback',
        maxCashback: '最高 8% 返现',
        e_maxCashback: 'Up to 8% Cashback',
        earnRate: '8',
        icon: 'location-o'
    },
    {
        id: 10,
        name: 'Kohl\'s',
        e_name: 'Kohl\'s',
        cashback: '1% 返现',
        e_cashback: '1% Cashback',
        maxCashback: '4% 返现',
        e_maxCashback: '4% Cashback',
        earnRate: '4',
        multiplier: '4x',
        icon: 'shop-o'
    }
])

// 底部导航项
const bottomNavItems = ref([
    { id: 1, name: '首页', icon: 'home-o' },
    { id: 2, name: '赚取', icon: 'gift-o' },
    { id: 3, name: '购物', icon: 'shopping-cart-o' },
    { id: 4, name: '游戏', icon: 'game-o' },
    { id: 5, name: '我的', icon: 'user-o' }
])

// 方法
const handleNavClick = (item) => {
    ElMessage.success({
        message: `点击了 ${item.name}`,
        offset: 100,
        duration: 5000
    })
}

const claimDailyBonus = () => {
    ElMessageBox.alert('恭喜您获得 50 积分！', '每日奖励', {
        confirmButtonText: '确定'
    })
}

const toggleNotifications = () => {
    ElMessage.info({
        message: '通知中心',
        offset: 100,
        duration: 5000
    })
}

const showBalanceDetails = () => {
    ElMessageBox.alert(`当前积分余额：${userBalance} 积分`, '积分详情', {
        confirmButtonText: '确定'
    })
}

const startEarning = () => {
    ElMessage.success({
        message: '开始赚取积分',
        offset: 100,
        duration: 5000
    })
}

const handleCardClick = (card) => {
    ElMessage.success({
        message: `选择了 ${card.title}`,
        offset: 100,
        duration: 5000
    })
}

const viewAllFeatured = () => {
    ElMessage.info({
        message: '查看全部特色项目',
        offset: 100,
        duration: 5000
    })
}

const handleShopClick = (shop) => {
    ElMessage.success({
        message: `选择了 ${shop.name}`,
        offset: 100,
        duration: 5000
    })
}

const viewAllShops = () => {
    ElMessage.info({
        message: '查看全部商店',
        offset: 100,
        duration: 5000
    })
}

const showShopGuide = () => {
    ElMessage.info({
        message: '购物指南',
        offset: 100,
        duration: 5000
    })
}

const startGaming = () => {
    ElMessage.success({
        message: '开始游戏',
        offset: 100,
        duration: 5000
    })
}

const viewAllGames = () => {
    ElMessage.info({
        message: '查看全部游戏',
        offset: 100,
        duration: 5000
    })
}

const handleBottomNavClick = (item) => {
    ElMessage.success({
        message: `点击了 ${item.name}`,
        offset: 100,
        duration: 5000
    })
}

onMounted(() => {
    console.log('奖励平台页面已加载')
})
</script>

<style scoped lang="scss">
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    
    .language-btn {
        background: #007bff;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;
        
        &:hover {
            background: #0056b3;
        }
    }
}

.rewards-page {
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;

    .box {
        margin-bottom: 20px;
        .title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            line-height: 1.4;
        }
    }

    .rewards-card {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .rewards-card-item {
            width: 20%;
            height: 100px;
            background: red;
            font-size: 15px;
        }
    }
}

.rewards-page-pc {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px;

    .box {
        margin-bottom: 20px;
        .title {
            font-size: 5px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
            line-height: 1.4;
        }
    }

    .rewards-card {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .rewards-card-item {
            width: 20%;
            height: 50px;
            background: red;
            font-size: 15px;
        }
    }
}
</style>